<!doctype html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Products Grid</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/x-icon" href="../../static/images/favicon.png"/>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
	  <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"-->
    <!--      crossorigin="anonymous">-->
	<!-- 一共15条css -->
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
	<link rel="stylesheet" th:href="@{/css/animate.min.css}">
	<link rel="stylesheet" th:href="@{/css/jquery-ui.css}">
	<link rel="stylesheet" th:href="@{/css/slick.css}">
	<link rel="stylesheet" th:href="@{/css/chosen.min.css}">
	<link rel="stylesheet" th:href="@{/css/pe-icon-7-stroke.css}">
	<link rel="stylesheet" th:href="@{/css/magnific-popup.min.css}">
	<link rel="stylesheet" th:href="@{/css/lightbox.min.css}">
	<link rel="stylesheet" th:href="@{/js/fancybox/source/jquery.fancybox.css}">
	<link rel="stylesheet" th:href="@{/css/jquery.scrollbar.min.css}">
	<link rel="stylesheet" th:href="@{/css/mobile-menu.css}">
	<link rel="stylesheet" th:href="@{/fonts/flaticon/flaticon.css}">
	<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="productsgrid-page">
<header class="header style7" th:replace="index::header">
	<div class="top-bar">
		<div class="container">
			<div class="top-bar-left">
				<div class="header-message">
					欢迎来到我们的网络商城！ヽ(✿ﾟ▽ﾟ)ノ
				</div>
			</div>
			<div class="top-bar-right">
				<div class="header-language">
					<div class="teamo-language teamo-dropdown">
						<a href="#" class="active language-toggle" data-teamo="teamo-dropdown">
									<span>
										简体中文（CHS）
									</span>
						</a>
						<ul class="teamo-submenu">
							<li class="switcher-option">
								<a href="#">
											<span>
												English (USD)
											</span>
								</a>
							</li>
							<li class="switcher-option">
								<a href="#">
											<span>
												Japanese (JPY)
											</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<ul class="header-user-links">
					<li>
						<a href="page/login.html">登录或注册</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="main-header">
			<div class="row">
				<div class="col-lg-3 col-sm-4 col-md-3 col-xs-7 col-ts-12 header-element">
					<div class="logo">
						<a href="index.html">
							<img src="../../static/images/logo.png" alt="img">
						</a>
					</div>
				</div>
				<div class="col-lg-7 col-sm-8 col-md-6 col-xs-5 col-ts-12">
					<div class="block-search-block">
						<form class="form-search form-search-width-category">
							<div class="form-content">
								<div class="category">
									<select title="cate" data-placeholder="All Categories" class="chosen-select"
											tabindex="1">
										<option value="United States">配件</option>
										<option value="United Kingdom">仙人掌</option>
										<option value="Afghanistan">多肉植物</option>
										<option value="Aland Islands">沙发</option>
										<option value="Albania">新品上市</option>
										<option value="Algeria">贮存</option>
									</select>
								</div>
								<div class="inner">
									<input type="text" class="input" name="s" value="" placeholder="在此输入搜索">
								</div>
								<button class="btn-search" type="submit">
									<span class="icon-search"></span>
								</button>
							</div>
						</form>
					</div>
				</div>
				<div class="col-lg-2 col-sm-12 col-md-3 col-xs-12 col-ts-12">
					<div class="header-control">
						<div class="block-minicart teamo-mini-cart block-header teamo-dropdown">
							<a href="javascript:void(0);" class="shopcart-icon" data-teamo="teamo-dropdown">
								Cart
								<span class="count">
										0
										</span>
							</a>
							<div class="no-product teamo-submenu">
								<p class="text">
									You have
									<span>
											 0 item(s)
										</span>
									in your bag
								</p>
							</div>
						</div>
						<div class="block-account block-header teamo-dropdown">
							<a href="javascript:void(0);" data-teamo="teamo-dropdown">
								<span class="flaticon-user"></span>
							</a>
							<div class="header-account teamo-submenu">
								<div class="header-user-form-tabs">
									<ul class="tab-link">
										<li class="active">
											<a data-toggle="tab" aria-expanded="true" href="#header-tab-login">登录</a>
										</li>
										<li>
											<a data-toggle="tab" aria-expanded="true" href="#header-tab-rigister">注册</a>
										</li>
									</ul>
									<div class="tab-container">
										<div id="header-tab-login" class="tab-panel active">
											<form method="post" class="login form-login">
												<p class="form-row-wide">
													<input type="email" placeholder="邮箱" class="input-text">
												</p>
												<p class="form-row-wide">
													<input type="password" class="input-text" placeholder="密码">
												</p>
												<p class="form-row">
													<label class="form-checkbox">
														<input type="checkbox" class="input-checkbox">
														<span>
																	记住我
																</span>
													</label>
													<input type="submit" class="button" value="登录">
												</p>
												<p class="lost_password">
													<a href="#">忘记密码？</a>
												</p>
											</form>
										</div>
										<div id="header-tab-rigister" class="tab-panel">
											<form method="post" class="register form-register">
												<p class="form-row-wide">
													<input type="email" placeholder="邮箱" class="input-text">
												</p>
												<p class="form-row-wide">
													<input type="password" class="input-text" placeholder="密码">
												</p>
												<p class="form-row">
													<input type="submit" class="button" value="注册">
												</p>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<a class="menu-bar mobile-navigation menu-toggle" href="#">
							<span></span>
							<span></span>
							<span></span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="header-nav-container rows-space-20">
		<div class="container">
			<div class="header-nav-wapper main-menu-wapper">
				<div class="vertical-wapper block-nav-categori">
					<div class="block-title">
							<span class="icon-bar">
								<span></span>
								<span></span>
								<span></span>
							</span>
						<span class="text">所有类别</span>
					</div>
					<div class="block-content verticalmenu-content">
						<ul class="teamo-nav-vertical vertical-menu teamo-clone-mobile-menu">
							<li class="menu-item">
								<a href="#" class="teamo-menu-item-title" title="New Arrivals">新品</a>
							</li>
							<li class="menu-item">
								<a title="Hot Sale" href="#" class="teamo-menu-item-title">热卖</a>
							</li>
							<li class="menu-item menu-item-has-children">
								<a title="Accessories" href="#" class="teamo-menu-item-title">小家具</a>
								<span class="toggle-submenu"></span>
								<ul role="menu" class=" submenu">
									<li class="menu-item">
										<a title="Audio" href="#" class="teamo-item-title">音响</a>
									</li>
									<li class="menu-item">
										<a title="Cacti" href="#" class="teamo-item-title">仙人掌</a>
									</li>
									<li class="menu-item">
										<a title="New Arrivals" href="#" class="teamo-item-title">新品</a>
									</li>
									<li class="menu-item">
										<a title="Accessories" href="#" class="teamo-item-title">装扮物</a>
									</li>
									<li class="menu-item">
										<a title="Storage" href="#" class="teamo-item-title">贮存</a>
									</li>
								</ul>
							</li>
							<li class="menu-item">
								<a title="Cacti" href="#" class="teamo-menu-item-title">仙人掌</a>
							</li>
							<li class="menu-item">
								<a title="Palms" href="#" class="teamo-menu-item-title">棕榈树</a>
							</li>
							<li class="menu-item">
								<a title="Ferns" href="#" class="teamo-menu-item-title">蕨类植物</a>
							</li>
							<li class="menu-item">
								<a title="Hanging plants" href="#" class="teamo-menu-item-title">悬挂植物</a>
							</li>
							<li class="menu-item">
								<a title="Variegated" href="#" class="teamo-menu-item-title">斑植</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="header-nav">
					<div class="container-wapper">
						<ul class="teamo-clone-mobile-menu teamo-nav main-menu " id="menu-main-menu">
							<li class="menu-item  menu-item-has-children">
								<a href="index.html" class="teamo-menu-item-title" title="Home">主页</a>
								<span class="toggle-submenu"></span>
								<ul class="submenu">
									<li class="menu-item">
										<a href="index.html">主页 1</a>
									</li>
									<li class="menu-item">
										<a href="page/home2.html">主页 2</a>
									</li>
									<li class="menu-item">
										<a href="page/home3.html">主页 3</a>
									</li>
								</ul>
							</li>
							<li class="menu-item menu-item-has-children">
								<a href="page/gridproducts.html" class="teamo-menu-item-title" title="Shop">商店</a>
								<span class="toggle-submenu"></span>
								<ul class="submenu">
									<li class="menu-item">
										<a href="page/gridproducts.html">全格局式</a>
									</li>
									<li class="menu-item">
										<a href="page/gridproducts_leftsidebar.html">左侧边栏式</a>
									</li>
									<li class="menu-item">
										<a href="page/gridproducts_bannerslider.html">横幅滑块式</a>
									</li>
									<li class="menu-item">
										<a href="page/listproducts.html">表格式</a>
									</li>
								</ul>
							</li>
							<li class="menu-item  menu-item-has-children item-megamenu">
								<a href="#" class="teamo-menu-item-title" title="Pages">页面</a>
								<span class="toggle-submenu"></span>
								<div class="submenu mega-menu menu-page">
									<div class="row">
										<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
											<div class="teamo-custommenu default">
												<h2 class="widgettitle">商店页面</h2>
												<ul class="menu">
													<li class="menu-item">
														<a href="page/shoppingcart.html">购物车</a>
													</li>
													<li class="menu-item">
														<a href="page/checkout.html">查看</a>
													</li>
													<li class="menu-item">
														<a href="page/contact.html">联系我们</a>
													</li>
													<li class="menu-item">
														<a href="error/404page.html">404报错</a>
													</li>
													<li class="menu-item">
														<a href="page/login.html">登录/注册</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
											<div class="teamo-custommenu default">
												<h2 class="widgettitle">产品</h2>
												<ul class="menu">
													<li class="menu-item">
														<a href="page/productdetails-fullwidth.html">全宽展示商品</a>
													</li>
													<li class="menu-item">
														<a href="page/productdetails-leftsidebar.html">产品展示+左边栏</a>
													</li>
													<li class="menu-item">
														<a href="page/productdetails-rightsidebar.html">产品展示+右边栏</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
										</div>
										<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
										</div>
									</div>
								</div>
							</li>
							<li class="menu-item  menu-item-has-children">
								<a href="page/inblog_right-siderbar.html" class="teamo-menu-item-title"
								   title="Blogs">Blogs</a>
								<span class="toggle-submenu"></span>
								<ul class="submenu">
									<li class="menu-item menu-item-has-children">
										<a href="#" class="teamo-menu-item-title" title="Blog Style">博客风格</a>
										<span class="toggle-submenu"></span>
										<ul class="submenu">
											<li class="menu-item">
												<a href="page/bloggrid.html">网格</a>
											</li>
											<li class="menu-item">
												<a href="page/bloglist.html">列表</a>
											</li>
											<li class="menu-item">
												<a href="page/bloglist-leftsidebar.html">列表边栏</a>
											</li>
										</ul>
									</li>
									<li class="menu-item menu-item-has-children">
										<a href="#" class="teamo-menu-item-title" title="Post Layout">帖子布局设计</a>
										<span class="toggle-submenu"></span>
										<ul class="submenu">
											<li class="menu-item">
												<a href="page/inblog_left-siderbar.html">左边栏</a>
											</li>
											<li class="menu-item">
												<a href="page/inblog_right-siderbar.html">右边栏</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="menu-item">
								<a href="page/about.html" class="teamo-menu-item-title" title="About">关于我们</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>
<div class="main-content main-content-product no-sidebar">
		<div class="container">
			<div class="row" th:replace="~{site/goodsList::goods-control}" >
				<div class="col-lg-12">
					<div class="breadcrumb-trail breadcrumbs">
						<ul class="trail-items breadcrumb">
							<li class="trail-item trail-begin">
								<a href="../index.html">Home</a>
							</li>
							<li class="trail-item trail-end active">
								网格展示商品
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="content-area shop-grid-content full-width col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="site-main">
						<div class="shop-top-control" th:replace="~{site/goodsList::goods-show}">
							<form class="select-item select-form">
								<span class="title">种类</span>
								<select title="sort" data-placeholder="9 Products/Page" class="chosen-select">
									<option value="2">9 个产品/页</option>
									<option value="1">12 个产品/页</option>
									<option value="3">10 个产品/页</option>
									<option value="4">8 个产品/页</option>
									<option value="5">6 个产品/页</option>
								</select>
							</form>
							<form class="filter-choice select-form">
								<span class="title">排序方式</span>
								<select title="sort-by" data-placeholder="Price: Low to High" class="chosen-select">
									<option value="1">价格：从低到高</option>
									<option value="2">按人气排序</option>
									<option value="3">按平均评分排序</option>
									<option value="4">按新鲜度排序</option>
									<option value="5">按价格排序：从低到高</option>
								</select>
							</form>
							<div class="grid-view-mode">
								<div class="inner">
									<a href="listproducts.html" class="modes-mode mode-list">
										<span></span>
										<span></span>
									</a>
									<a href="gridproducts.html" class="modes-mode mode-grid  active">
										<span></span>
										<span></span>
										<span></span>
										<span></span>
									</a>
								</div>
							</div>
						</div>
						<h3 class="custom_blog_title" >
							网格展示
						</h3>
						<ul class="row list-products auto-clear equal-container product-grid">
							<li class="product-item  col-lg-3 col-md-4 col-sm-6 col-xs-6 col-ts-12 style-1" th:each="goods:${goodsList}">
								<div class="product-inner equal-element">
									<div class="product-info">
										<br>
										<h2 class="product-name product_title">
											<i th:utext="${goods.title}"></i>
										</h2>
										<h6 class="product-name product_title">
											<a th:utext="${goods.goodsName}">产品名</a>
										</h6>

										<div class="product-info-right">
											<h4 class="price">
												<i th:text="${goods.price}">11</i>元
											</h4>
											<div class="product-list-message">
												数量&nbsp;&nbsp;：(x1)
												<i aria-hidden="true"></i>
											</div>
										</div>
										<div class="product-info-right">
											<div class="product-list-message">
												发布时间&nbsp;&nbsp;:
											</div>
											<div class="product-list-message">
												<a href="#"
												   th:utext="${#dates.format(goods.createTime,'yyyy-MM-dd HH:mm:ss')}"></a>
											</div>
										</div>
									</div>
									<div class="product-thumb">
										<div class="thumb-inner">
											<div class="thumb-group">
												<input type="hidden" id="goodsId" th:value="${goods.id}">
												<a href="#" class="button quick-wiew-button">查看详情</a>
												<div class="loop-form-add-to-cart">
													<button name="addCart-Btn" type="button"
															th:disabled="${goods.status==1}"
															th:onclick="|addCart(${goods.id});|"
															class="single_add_to_cart_button button">快速加入购物车</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<div class="pagination clearfix style2" th:replace="~{/site/goodsList::pagnation}">
							<div class="nav-link">
								<a href="#" class="page-numbers"><i class="icon fa fa-angle-left" aria-hidden="true"></i></a>
								<a href="#" class="page-numbers">1</a>
								<a href="#" class="page-numbers">2</a>
								<a href="#" class="page-numbers current">3</a>
								<a href="#" class="page-numbers"><i class="icon fa fa-angle-right" aria-hidden="true"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<footer class="footer style7">
		<div class="container">
			<div class="container-wapper">
				<div class="row">
					<div class="box-footer col-xs-12 col-sm-4 col-md-4 col-lg-4 hidden-sm hidden-md hidden-lg">
						<div class="teamo-newsletter style1">
							<div class="newsletter-head">
								<h3 class="title">通讯</h3>
							</div>
							<div class="newsletter-form-wrap">
								<div class="list">
									注册我们的免费视频课程和<br/>城市花园灵感
								</div>
								<input type="email" class="input-text email email-newsletter"
									   placeholder="你的电子邮件">
								<button class="button btn-submit submit-newsletter">订阅</button>
							</div>
						</div>
					</div>
					<div class="box-footer col-xs-12 col-sm-4 col-md-4 col-lg-4">
						<div class="teamo-custommenu default">
							<h2 class="widgettitle">快捷菜单</h2>
							<ul class="menu">
								<li class="menu-item">
									<a href="#">新品上市</a>
								</li>
								<li class="menu-item">
									<a href="#">生活方式</a>
								</li>
								<li class="menu-item">
									<a href="#">仙人掌</a>
								</li>
								<li class="menu-item">
									<a href="#">棕榈树</a>
								</li>
								<li class="menu-item">
									<a href="#">蕨类植物</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="box-footer col-xs-12 col-sm-4 col-md-4 col-lg-4 hidden-xs">
						<div class="teamo-newsletter style1">
							<div class="newsletter-head">
								<h3 class="title">通讯</h3>
							</div>
							<div class="newsletter-form-wrap">
								<div class="list">
									注册我们的免费视频课程和<br/>城市花园灵感
								</div>
								<input type="email" class="input-text email email-newsletter"
									   placeholder="你的电子邮件">
								<button class="button btn-submit submit-newsletter">订阅</button>
							</div>
						</div>
					</div>
					<div class="box-footer col-xs-12 col-sm-4 col-md-4 col-lg-4">
						<div class="teamo-custommenu default">
							<h2 class="widgettitle">信息</h2>
							<ul class="menu">
								<li class="menu-item">
									<a href="#">常见问题</a>
								</li>
								<li class="menu-item">
									<a href="#">跟踪订单</a>
								</li>
								<li class="menu-item">
									<a href="#">送货</a>
								</li>
								<li class="menu-item">
									<a href="#">联系我们</a>
								</li>
								<li class="menu-item">
									<a href="#">返回</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="footer-end">
					<div class="row">
						<div class="col-sm-12 col-xs-12">
							<div class="teamo-socials">
								<ul class="socials">
									<li>
										<a href="#" class="social-item" target="_blank">
											<i class="icon fa fa-facebook"></i>
										</a>
									</li>
									<li>
										<a href="#" class="social-item" target="_blank">
											<i class="icon fa fa-twitter"></i>
										</a>
									</li>
									<li>
										<a href="#" class="social-item" target="_blank">
											<i class="icon fa fa-instagram"></i>
										</a>
									</li>
								</ul>
							</div>
							<div class="coppyright">Copyright &copy; 2020.Company name All rights reserved</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
<a href="#" class="backtotop">
	<i class="fa fa-angle-double-up"></i>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script th:src="@{/js/jquery.plugin-countdown.min.js}"></script>
<script th:src="@{/js/jquery-countdown.min.js}"></script>
<!-- JavaScript Bundle with Popper -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/owl.carousel.min.js}"></script>
<script th:src="@{/js/magnific-popup.min.js}"></script>
<script th:src="@{/js/isotope.min.js}"></script>
<script th:src="@{/js/jquery.scrollbar.min.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/js/mobile-menu.js}"></script>
<script th:src="@{/js/chosen.min.js}"></script>
<script th:src="@{/js/slick.js}"></script>
<script th:src="@{/js/jquery.elevateZoom.min.js}"></script>
<script th:src="@{/js/jquery.actual.min.js}"></script>
<script th:src="@{/js/fancybox/source/jquery.fancybox.js}"></script>
<script th:src="@{/js/lightbox.min.js}"></script>
<script th:src="@{/js/owl.thumbs.min.js}"></script>
<script th:src="@{/js/jquery.scrollbar.min.js}"></script>
<script th:src="@{/js/frontend-plugin.js}"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script th:src="@{/js/goods.js}"></script>
</body>
</html>